<template>
  <div class="box">
    <router-link to="" class="set-item">
        <div class="left-box only-1" >我的头像</div>
        <div class="right-box">
            <div class="img-box">
                <img :src="photo" alt="">
            </div>
            <van-icon name="arrow" color="#999"/>
        </div>
    </router-link>
   <router-link to="" class="set-item">
        <div class="left-box only-1" >我的昵称</div>
        <div class="right-box">
            <span>{{nickname}}</span>
            <van-icon name="arrow" color="#999"/>
        </div>
    </router-link>
    <div class="gray-box"></div>
    <router-link to="" class="set-item">
        <div class="left-box only-1" >我的收货地址</div>
        <div class="right-box">
            <van-icon name="arrow" color="#999"/>
        </div>
    </router-link>
  </div>
</template>

<script>
import photo from '@/assets/temporary/mine-photo.png'
export default {
    name:'Set',
    data(){
        return{
            // 头像
            photo:photo,
            nickname:'远方的风'
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/public";
.box{
    background-color: $gray_bg;
    padding-top:vw(20);
}
.set-item{
    height: vw(100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 vw(20);
    border-bottom:1px solid $gray_bg;
    background-color: #fff;
    font-size: vw(32);
    .left-box{
       flex:1;
    }
    .right-box{
         margin-left:vw(20);
        display: flex;
        align-items: center;
        color:#666;
        .img-box{
            width: vw(68);
            height: vw(68);
            border-radius: 50%;
            overflow: hidden;
        }
    }
}
</style>